WORKSHOP 


Schema's maken met Gliffy 


o with the flow 


Schema's, diagrammen of flowcharts: soms maken ze 
deel uit van een Word-document. Heb je al eens gepro- 
beerd zo'n schema te maken met de tekentools in Word? 
Of met Excel? Je verliest er heel veel tijd mee en boven- 
dien zien je diagrammen er vaak niet uit. Met Gliffy doe 
je het gratis, snel en volledig online! 4 rreverick corors 


WAT DOEN WE? 


WAARMEE? 


DUUR? 


MOEILIJKHEID? 


B je documenten of presentaties op te fleuren. 


Pe: maken is traditioneel voer voor ge- 
specialiseerde pakketten zoals Microsoft Visio. 
Zo'n softwarepakketje kost echter honderden euro's, 
en de leercurve is ook wel erg steil. Daarom behelpen 
de meesten zich met de tools in Word of Excel, maar 
het resultaat is erg matig. Nu is er dus Gliffy www. 
gliffy.com, een website waar je online dergelijke dia- 
grammen of flowcharts kan maken. Gliffy maakt 
gebruik van AJAX-technologieën — net zoals Gmail 
www.gmail.com of online tekstverwerker Writely www. 
writely.com. Wij laten je zien hoe je Gliffy gebruikt om 


STAP 1 / INTEKENEN BĲ GLIFFY 


Hoewel Gliffy gratis is, moet je wel eerst intekenen. Ga naar www.gliffy.com 
en klik op Sien Up ror Free. Geef vervolgens tweemaal je e-mailadres in en 
tweemaal een wachtwoord. Vink eventueel Yes! SEND ME EMAILS ABOUT FUTURE 
Gurrrv uppates uit om geen mail te ontvangen, en klik op Stan vp. Je krijgt 
dan een venstertje te zien met als titel PLeasE NAME YOUR DOCUMENT. Vul een 
bestandsnaam in, bijvoorbeeld Dracram1 en klik op OK. 


STAP 2 / DE INTERFACE VERKENNEN 


Gliffy lijkt op een echt programma: bovenaan heb je een menubalk om 
documenten te bewaren, zaken te selecteren of documenten te delen 
met anderen (daarover later meer). In de menubalk staan ook knoppen 
om snel vormen aan te maken of te wijzigen en om in te zoomen, af te 
drukken, enzovoort. Links staan alle symbolen die je in je diagrammen 
kan gebruiken, netjes onderverdeeld per type: FLow Chart, UML (een type 
flowcharts), Network (om een netwerk uit te tekenen), User interrace (voor 
softwareontwikkelaars), FLoorPLan (om een basisplan te tekenen voor een 
huis of een appartement) en Bastc shapes. Deze laatste zijn alle vormen 
die je nodig hebt om een diagram te maken, en die zal je ook het vaakst 
gebruiken. In het midden van het scherm vind je het document zelf, en 
rechts ervan de Paterres. Hier kan je alle eigenschappen van het docu- 
ment bepalen, zoals de grootte (afhankelijk van de resolutie van je 
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De interface van Gliffy bestaat uit 4 grote delen. 


scherm) en de achtergrondkleur. Selecteer je een object of een vorm, 
dan kan je hier ook de eigenschappen van het object zelf instellen. Nu 
ben je klaar om echt aan de slag te gaan (zie afbeelding 2)! 


STAP 3 / AFSPRAKEN BĲ EEN FLOWCHART 


Wil je een echte flowchart maken, dan hou je je het best aan een aan- 

tal conventies. Ten eerste zijn er de vormen: die zijn op voorhand 

vastgelegd. Klik je bij Symgors op Frow CHarr, dan zie je de vormen staan. 

De drie meest gebruikte symbolen zijn: 

e Rechthoek: een proces (bijvoorbeeld: Mark bespreekt de situatie met 
Jan) 

e Ruit: een beslissing (bijvoorbeeld: Mark ontslaat Jan) 

e Cirkel: een start- of eindpunt (bijvoorbeeld: computer start niet 
meer of zaak gesloten) 


De andere symbolen kan je natuurlijk ook gebruiken, maar met deze 
drie symbolen kunnen we al een correcte flowchart maken (zie afbeel- 
ding 3). Verder kan je kleuren gebruiken om acties van verschillende 
partijen te scheiden. Start- of eindpunt zet je meestal in het rood, 
maar de kleuren van andere partijen kan je zelf bepalen, bijvoorbeeld 
rood voor Mark, geel voor Jan, enzovoort. 


Deze drie symbolen mcn 
worden het vaakst ge- lia 
bruikt bij traditionele 


flowcharts. El 


EN HIER ONZE LAATSTE AANWINST, EEN EUHIE GLIFFY |! 


Onze flowchart… zonder pijlen. 


STAP 4 / FLOWCHART UITTEKENEN 


We gebruiken Gliffy om een flowchart te maken over iets triviaals zoals 
behangen. Behangen lijkt makkelijk, maar eigenlijk gaan daar heel wat 
processen en beslissingen mee gepaard. In onze flowchart gebruiken we 
maar drie symbolen (rechthoek, ruit en cirkel) en maar één partij, want 
we gaan er vanuit dat je zelf zal behangen. Je sleept de symbolen gewoon 
op het werkoppervlak door de linkermuisknop ingedrukt te houden. Dub- 
belklik vervolgens op een figuur om tekst toe te voegen. Sleep om te 
beginnen een Srart/enD-symbool naar de linkerkant bovenaan de pagina. 
Dubbelklik erop en tik Srarrt in. Vervolgens voegen we een Deciston-sym- 
bool toe met de tekst Moer HET ouD BEHANG wee? Je kan de ruit vergroten 
door met de muis aan de handvatten aan de zijkanten te slepen. Verder 
voegen we nog een aantal symbolen toe, zodat je als resultaat de flow- 
chart van afbeelding 4 krijgt. Pas ook de kleur van Start en Einde aan 
door bij Properties op Fur CoLor te klikken en rood te kiezen. 


STAP 5 / PIJLEN TOEVOEGEN 


Onze flowchart ziet er al redelijk goed uit, maar alle pijlen ontbreken 
nog. Klik op het vierde icoontje in de werkbalk, de connector-tool. Klik 


DEE PE Nem 


Onze flowchart… mét pijlen. 


vervolgens onder Starr en verbind de pijl met het symbool eronder. Doe 
dat voor alle symbolen. Kies ook het juiste lijntype (een pijl) in Proper- 
Tis (vierde icoontje), onder Line Enps. Eens dat gebeurd is, moet je aan 
sommige pijlen nog tekst toevoegen. Dubbelklik gewoon op een pijl en 
tik de tekst in, bijvoorbeeld Ja of Neen (zie afbeelding 5). 


STAP 6 / DE FLOWCHART AFWERKEN 


Zoals je kan zien bij stap 5 zijn er nog enkele zaken niet perfect: hier 
en daar is er een pijltje teveel of kan je een pijl niet meer zien door 
het tekstlabel. Dat zijn ‘problemen’ die je niet altijd kan oplossen, want 
Gliffy bevindt zich nog in een bètaversie en dat merk je. Er zijn wel de 
knoppen Brina To BACK en Brina To Front op de werkbalk, maar die werken 
alleen om objecten in de juiste volgorde te zetten, en dus niet voor 
pijltjes. Klik wel eens op een lege ruimte in het document en ga naar 
de Properties, rechts op het scherm. Doe het vinkje weg bij Grip vrsiBLe. 
Je ziet nu je schema met een witte achtergrond… een stuk netter! Klik 
op Save (naast View). Heb je al meer dan eens je werk opgeslagen, dan 
zie je links, onder Reviston History, de vorige versies staan. Je kan zon- 
der problemen teruggaan naar een vorige versie, op voorwaarde dat je 
het bestand (regelmatig) bewaart. 


Publish Drawing 


Zeeg 


Get simple instructions for embedding your published 


| ante heontnathernde oane 
| 


Publiceer je flowchart op het net. 


STAP 7 / DE FLOWCHART OPSLAAN OF AFDRUKKEN 


Je kan de flowchart makkelijk afdrukken door in de werkbalk op het 
icoontje met de printer te klikken. Kies gewoon de juiste printer, en 
klaar is Kees. Je kan hem ook exporteren als een jpg- of png-bestand 
door op Fire, Export as JPEG of Export As PNG te klikken. Zo’n jpg-bestand 
kan je dan makkelijk via mail versturen. Klik je echter op Share, PuBLisH 
TO INTERNET, dan krijg je een extra venster. Selecteer PusLisn en je krijgt 
meteen vier links van jouw flowchart op de publieke website van Gliffy. 
Het volstaat die links door te mailen of in een webpagina te verwerken 
om je flowchart op het web te zetten — je hoeft hem zelfs niet te 
uploaden naar je website (zie afbeelding 7)! Klik op How ro EMBED om de 
exacte html-code te krijgen voor je website. Je kan zelfs de code krij- 
gen voor opname in je blog of wiki! 


STAP 8 / DEEL JE DIAGRAM 


Gliffy is een online programma, en ook dát merk je: je kan je diagram 
namelijk delen met anderen. Klik daarvoor op Share, CoLLaBORATE en geef 
de e-mailadressen in van collega’s of vrienden. Zij krijgen dan een 
mailtje en kunnen de flowchart bekijken en bewerken — op voorwaarde 
dat ze ook eerst een gratis account aanmaken. Let wel op: je kan maar 
met één persoon tegelijkertijd de flowchart bekijken. Je kan wel zien 
welke wijzigingen een bepaalde persoon heeft aangebracht door de 
revisies te bekijken. « 
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